<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="container">
    <!--1. 搜索按钮加搜索框 -->
    <div class="header">
        <input type="text" id="search-input" placeholder="请输入搜索内容...">
        <button id="searcher-but">搜索</button>
    </div>
    <!-- 2.显示搜索结果 -->
    <div class="data" target="_blank">
<!--        &lt;!&ndash; 每个点item就表示一条记录 &ndash;&gt;-->
<!--        <div class="item">-->
<!--            <a href="#" id="title" target="_blank"></a>-->
<!--            <div class="desc"></div>-->
<!--            <div class="url"></div>-->
<!--        </div>-->
<!--        <div class="item">-->
<!--            <a href="#"></a>-->
<!--            <div class="desc"></div>-->
<!--            <div class="url"></div>-->
<!--        </div>-->
<!--        <div class="item">-->
<!--            <a href="#"></a>-->
<!--            <div class="desc"></div>-->
<!--            <div class="url"></div>-->
<!--        </div>-->
    </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
    /* 先去掉浏览器默认样式 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    /* 给整体页面设置一个高度 */
    html,body{
        height: 100%;
        /*设置背景图*/
        background-image: url("image/R-C.jpg");
        /*设置背景图不平铺*/
        background-repeat: no-repeat;
        /*设置背景图位置*/
        background-position: center;
        /*设置背景图大小*/
        background-size: cover;
        }
    /*针对.container设置文本样式*/
    .container{
        width: 800px;
        height: 100%;
        /*设置水平居中*/
        margin: 0 auto;
        /*设置背景色为半透明*/
        background-color: rgba(255,255,255,0.8);
        /*设置圆形角矩阵*/
        border-radius: 10px;
        /*设置内边框使其框与文本分离*/
        padding: 15px;

        /* 使滚动条在.contain页面中而不是div*/
        overflow: auto;
    }
    .header{
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .header input{
        /*float: left;*/
        width: 680px;
        height: 45px;
        font-size: 22px;
        padding-left: 10px;
        border-radius: 10px;
    }
    .header button{
        /*float:left;*/
        width: 75px;
        height: 45px;
        font-size: 22px;
        padding-left: 10px;
        border-radius: 10px;
        color: aliceblue;
        background-color: rgb(42,107,205);
        border: none;
        line-height: 50px;
    }
    .header button:active{
        background: gray;
    }
    .result {
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }
    .result a {
        font-size: 18px;
        color: #1a0dab;
        text-decoration: none;
        margin-bottom: 5px;
        display: block;
    }
    .result a:hover {
        text-decoration: underline;
    }
    .result.sum{
        color: gray;
        margin-top: 10px;
    }
    .desc {
        color: #545454;
        margin: 5px 0;
    }
    .url {
        color: #006621;
        font-size: 14px;
    }
    .no-result {
        text-align: center;
        padding: 20px;
        color: #666;
    }
    .result .desc i{
        color: red;
        /*去掉斜体*/
        font-style:normal;
    }
</style>
<script>
    <!--  在文档中查找元素 -->
    let button=document.querySelector("#searcher-but");
    // 为按钮绑定点击事件
    button.onclick=function (){
        //先获取到输入框内容
        let input=document.querySelector(".header input");
        let query=input.value;
        console.log(query);
        //构建一个ajax将请求(输入框内容)发送给服务器
        $.ajax({
            type: "get",
            url: "/searcher?query="+query,
            success :function (results,status){
                //result表示拿到的数据
                //status表示状态码
                console.log(results);
                searcher(results);
            }
        })

    };
    function searcher(results){
        //获取到.data这个标签
        var dataElement = document.querySelector('.data');
        //清除之前的数据
        dataElement.innerHTML="";
        let sumDiv=document.createElement('div');
        sumDiv.className='sum';
        sumDiv.innerHTML="当前已搜索到"+results.length+"个结果";
        dataElement.appendChild(sumDiv);
        for(let result of results){
            var divElement = document.createElement('div');
            divElement.className='result';

            //创建标题
            var title = document.createElement('a');
            title.href=result.url;
            title.innerHTML=result.title;
            //点击跳转到新页面
            title.target="_blank";
            //将标题加入
            divElement.appendChild(title);

            //构建一个描述
            var desc = document.createElement('div');
            desc.className='desc';
            desc.innerHTML=result.desc;
            divElement.appendChild(desc);

            //构建一个url
            var url = document.createElement('div');
            url.className="url";
            url.innerHTML=result.url
            divElement.appendChild(url);

            dataElement.appendChild(divElement);
        }

    }
</script>
</body>
</html>